<!DOCTYPE html>
<html>
<body>
  <div id="root"></div>
  <div id="root1"></div>
  <div id="root2"></div>
</body>
<script src="./reactv18/babel.min.js"></script>
<script src="./reactv18/react.development.js"></script>
<script src="./reactv18/react-dom.development.js"></script>
<!-- 1. 引入类型限制js, 在react15版本以前，这个集成在react库当中，之后独立开来 -->
<script src="./reactv18/prop-types.js"></script>

<script type="text/babel">
  // 本例子可以证明diffing算法的更新，span在更新，而input不会吧输入的内容刷掉
  
  class Time extends React.Component{
    state = {date: new Date()}

    componentDidMount(){
      setInterval(()=>{
        this.setState({
          date: new Date()
        })
      }, 1000)
    }

    render(){
      return (
        <div>
          <h1>hello</h1>
          <input type="text" />
          <span>现在是：{this.state.date.toTimeString()}</span>
        </div>
      )
    }
  }
  const container = document.getElementById('root')
  const root = ReactDOM.createRoot(container)
  root.render(<Time />)
</script>
</html>
